import React, { Component,createRef } from 'react'
import * as echarts from 'echarts'
export default class App extends Component {
  constructor(){
    super()
    this.containerRef=createRef()
  }
  /*
    在加载阶段执行的一个生命周期的钩子函数，该函数只执行一次
  */
  componentDidMount(){
    //创建WebSocket客户端对象
    let ws=new WebSocket('ws://localhost:9999')
    //监听成功的与服务器建立了连接的事件
    ws.onopen=()=>{
      console.log('服务器连接成功');
      ws.send(1)
    }
    ws.onerror=()=>{
      console.log('服务器连接失败');
    }
    ws.onmessage=(msg)=>{
      console.log('来自服务端的信息:',JSON.parse(msg.data));
      options.series[0].data=JSON.parse(msg.data)
      mychart.setOption(options)

    }
    //设置options选项
    let options={
      title:{
        text:'药品销售量信息'
      },
      xAxis:{
        data:['莲花清温','芬必得','布洛芬','柴桂','板蓝根颗粒'],
      },
      yAxis:{},
      series:[
        {
          name:'销量',
          type:'line',
          data:[35,67,11,22,44]
        }
      ]
    }
    //初始化echarts方法
    const mychart=echarts.init(this.containerRef.current)
    //mychart.setOption(options)



  }
  render() {
    return (
      <div>
          <div ref={this.containerRef} style={{width:'500px',height:'500px'}}></div>
      </div>
    )
  }
}
